<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <!-- 租赁总数 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lesa-num-card :obj="leaseInfo" />
        </div>
      </el-col>
      <!-- 将到期 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-two
            :obj="soonExpireInfo"
            @viewLeaseDetail="viewLeaseDetail({ status: 2 })"
          />
        </div>
      </el-col>
      <!-- 已到期 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-two
            :obj="expiredInfo"
            @viewLeaseDetail="viewLeaseDetail({ status: 3 })"
          />
        </div>
      </el-col>
      <!-- 待生效 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three
            :obj="house"
            :datas="tobeEffective"
            @houseDetail="houseDetail"
          >
            <div slot="a" class="p1" @click="viewLeaseDetail({ status: 1 })">
              <p>查看详情 <i class="el-icon-arrow-right" /></p>
            </div>
          </lase-three>
        </div>
      </el-col>
      <!-- 招租周期 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-four :obj="rent" :datas="rentCycle">
            <div slot="a" class="p1" @click="viewLeaseDetail">
              <!-- <p>查看详情 <i class="el-icon-arrow-right" /></p> -->
            </div>
          </lase-four>
        </div>
      </el-col>
      <!-- 出售周期 -->
      <el-col :xs="24" :sm="12" :lg="8" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-four :obj="cycle" :datas="saleCycle">
            <div slot="a" class="p1" @click="viewLeaseDetail">
              <!-- <p>查看详情 <i class="el-icon-arrow-right" /></p> -->
            </div>
          </lase-four>
        </div>
      </el-col>
      <!-- 招租中 -->
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three
            :obj="renting"
            :datas="leasingInfo"
            @houseDetail="houseDetail"
          >
            <div slot="a" class="p1" @click="viewLeaseDetail({ status: 0 })">
              <p>查看详情 <i class="el-icon-arrow-right" /></p>
            </div>
          </lase-three>
        </div>
      </el-col>
      <!-- 待交割的房产 -->
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three
            :obj="delivered"
            :datas="deliveryInfo"
            @houseDetail="houseDetail"
          >
            <div slot="a" class="p1" @click="toHousePage(1)">
              <p>查看详情 <i class="el-icon-arrow-right" /></p>
            </div>
          </lase-three>
        </div>
      </el-col>
      <!-- 待领取钥匙的房产-->
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three
            :obj="keys"
            :datas="reciveKeyInfo"
            @houseDetail="houseDetail"
          >
            <div slot="a" class="p1" @click="toHousePage(2)">
              <p>查看详情 <i class="el-icon-arrow-right" /></p>
            </div>
          </lase-three>
        </div>
      </el-col>
      <!-- 退房的房产 -->
      <el-col :xs="24" :sm="12" :lg="12" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <lase-three
            :obj="Checked"
            :datas="checkOutInfo"
            @houseDetail="houseDetail"
          >
            <div slot="a" class="p1" @click="toHousePage(3)">
              <p>查看详情 <i class="el-icon-arrow-right" /></p>
            </div>
          </lase-three>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LaseTwo from './components/laseTwo'
import LaseThree from './components/laseThree'
import LaseFour from './components/laseFour'
import LesaNumCard from './components/lasePage'
import { myTimeDian } from '@/utils/common'
import {
  getLeaseNum,
  getExpiredNum,
  getSoonExpireNum,
  getTobeEffectiveNum,
  getAverageRentCycle,
  getAverageSaleCycle,
  getLeasingNum,
  getWaitDeliveryHouse,
  getWaitReciveKeyHouse,
  getCheckOutHouse
} from '@/api/dashboard'

export default {
  components: {
    LaseTwo,
    LaseFour,
    LaseThree,
    LesaNumCard
  },
  data() {
    return {
      twoObj: {
        tit: '将到期的租约数量',
        tit1: '0-30天',
        tit2: '31-60天',
        tit3: '61-90天'
      },
      twoObj2: {
        tit: '已到期的租约数量',
        tit1: '0-30天',
        tit2: '31-60天',
        tit3: '61-90天'
      },
      rent: {
        tit: '平均招租周期',
        day: ''
      },
      cycle: {
        tit: '平均出售周期',
        day: ''
      },
      house: {
        one: '房产地址',
        three: '租期',
        five: '起始日期'
      },
      renting: {
        tit: '招租中的房产',
        one: '房产地址',
        three: 'PM',
        five: 'BD',
        six: '开始时间'
      },
      delivered: {
        tit: '待交割的房产',
        one: '房产地址',
        two: 'PM',
        three: 'BD',
        five: '运营'
      },
      keys: {
        tit: '待领取钥匙的房产',
        one: '房产地址',
        two: 'PM',
        three: 'BD',
        five: '运营'
      },
      Checked: {
        tit: '退房的房产',
        one: '房产地址',
        two: 'PM',
        three: 'BD',
        five: '运营'
      },
      leaseInfo: {},
      soonExpireInfo: {},
      expiredInfo: {},
      tobeEffective: {
        list: [],
        totalNum: 0
      },
      rentCycle: [],
      saleCycle: [],
      leasingInfo: {
        list: [],
        totalNum: 0
      },
      deliveryInfo: {
        list: [],
        totalNum: 0
      },
      reciveKeyInfo: {
        list: [],
        totalNum: 0
      },
      checkOutInfo: {
        list: [],
        totalNum: 0
      }
    }
  },
  mounted() {
    this.leaseNum()
    this.soonExpireNum() // 将到期
    this.getExpiredInfo() // 已到期
    this.getTobeEffectiveInfo() // 待生效
    this.getRentCycle() // 招租周期
    this.getSaleCycle() // 出售周期
    this.getLeasingInfo() // 招租中
    this.getDeliveryInfo() // 待交割
    this.getReciveKeyInfo() // 领钥匙
    this.getCheckOutInfo() // 退房
  },
  methods: {
    async leaseNum() {
      const res = await getLeaseNum()
      if (res.code === 200) {
        this.leaseInfo = res.data
      }
    },
    /** 将到期 */
    async soonExpireNum() {
      const res = await getSoonExpireNum()
      if (res.code === 200) {
        this.soonExpireInfo = Object.assign(this.twoObj, {
          totalNum: res.data.expireTotalNum,
          day30: res.data.expireIn30,
          day60: res.data.expireIn60,
          day90: res.data.expireIn90
        })
      }
    },
    viewLeaseDetail(args) {
      // var detailRes = await leaseAdd(par.id)
      const routerURl = this.$router.resolve({
        path: '/house/lease',
        query: args || {}
      })
      window.open(routerURl.href, '_blank')
    },
    toHousePage(type) {
      // var detailRes = await leaseAdd(par.id)
      const routerURl = this.$router.resolve({
        path: '/house/query' + type,
        query: { type }
      })
      window.open(routerURl.href, '_blank')
    },
    houseDetail(id) {
      // // var detailRes = await leaseAdd(par.id)
      const routerURl = this.$router.resolve({
        path: '/house/pageDetail',
        query: { id: id }
      })
      window.open(routerURl.href, '_blank')
    },
    /** 已到期 */
    async getExpiredInfo() {
      const res = await getExpiredNum()
      if (res.code === 200) {
        this.expiredInfo = Object.assign(this.twoObj2, {
          totalNum: res.data.expiredTotalNum,
          day30: res.data.expiredIn30,
          day60: res.data.expiredIn60,
          day90: res.data.expiredIn90
        })
      }
    },
    /** 待生效 */
    async getTobeEffectiveInfo() {
      const res = await getTobeEffectiveNum()
      if (res.code === 200) {
        var list = res.data.addresList
        this.tobeEffective.list = list.map((item) => {
          return {
            id: item.id,
            address: item.address,
            BD: item.leaseTerm,
            five: myTimeDian({ createdTime: item.beginDate })
          }
        })
        this.tobeEffective.totalNum = res.data.totalNum
      }
    },
    /** 招租周期 */
    async getRentCycle() {
      const res = await getAverageRentCycle()
      if (res.code === 200) {
        this.rentCycle = res.data.data.map((item) => {
          return {
            a: item.county,
            b: item.rentCycle
          }
        })
        this.rent.day = res.data.average || 0
      }
    },
    /** 出售周期 */
    async getSaleCycle() {
      const res = await getAverageSaleCycle()
      if (res.code === 200) {
        this.saleCycle = res.data.data.map((item) => {
          return {
            a: item.county,
            b: item.saleCycle
          }
        })
        this.cycle.day = res.data.average || 0
      }
    },
    /** 招租中 */
    async getLeasingInfo() {
      const res = await getLeasingNum()
      if (res.code === 200) {
        var list = res.data.addresList
        this.leasingInfo.list = list.map((item) => {
          return {
            id: item.id,
            address: item.address,
            BD: item.name,
            five: item.bdName,
            six: item.hireDate ? item.hireDate.split(' ')[0] : ''
          }
        })
        this.leasingInfo.totalNum = res.data.totalNum
      }
    },
    /** 待交割 */
    async getDeliveryInfo() {
      const res = await getWaitDeliveryHouse()
      if (res.code === 200) {
        var list = res.data.addresList
        this.deliveryInfo.list = list.map((item) => {
          return {
            id: item.id,
            address: item.address,
            PM: item.pmName,
            BD: item.bdName,
            five: item.operatorName
          }
        })
        this.deliveryInfo.totalNum = res.data.totalNum
      }
    },
    /** 领钥匙 */
    async getReciveKeyInfo() {
      const res = await getWaitReciveKeyHouse()
      if (res.code === 200) {
        var list = res.data.addressList
        this.reciveKeyInfo.list = list.map((item) => {
          return {
            id: item.id,
            address: item.address,
            PM: item.pmName,
            BD: item.bdName,
            five: item.operatorName
          }
        })
        this.reciveKeyInfo.totalNum = res.data.totalNum
      }
    },
    /** 退房 */
    async getCheckOutInfo() {
      const res = await getCheckOutHouse()
      if (res.code === 200) {
        var list = res.data.addressList
        this.checkOutInfo.list = list.map((item) => {
          return {
            id: item.id,
            address: item.address,
            PM: item.pmName,
            BD: item.bdName,
            five: item.operatorName
          }
        })
        this.checkOutInfo.totalNum = res.data.totalNum
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.p1 {
  text-align: right;
  margin-top: 15px;
  font-size: 13px;
  color: #5ac6b7;
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.card {
  position: relative;
}
</style>
